<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工添加</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">

      <!--提示信息-->
      <el-alert
              title="添加员工信息" center show-icon :closable="false"
              type="info">
      </el-alert>

      <!--步骤条-->
      <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="高级信息"></el-step>
        <el-step title="合同信息"></el-step>
        <el-step title="分配职位"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-form :model="empForm" :rules="empFormRules" ref="empFormRef"
               label-width="70px" label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="tabPosition"
                 :before-leave="beforeTabLeave">
          <el-tab-pane label="基本信息" name="1">
            <el-form-item label="姓名" prop="empName" >
              <el-input v-model="empForm.empName" label-width="70px" ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex" >
              <el-input v-model="empForm.sex" label-width="70px" ></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone" >
              <el-input v-model="empForm.phone" label-width="70px" ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="emali" >
              <el-input v-model="empForm.emali" label-width="70px" ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="高级信息" name="2">高级信息</el-tab-pane>
          <el-tab-pane label="合同信息" name="3">合同信息</el-tab-pane>
          <el-tab-pane label="分配职位" name="4">分配职位</el-tab-pane>
        </el-tabs>
      </el-form>



    </el-card>
  </div>
</template>

<script>

  import RichText from "components/RichText";

  export default {
    data() {
      return {
        activeIndex: '1',
        tabPosition: 'left',
        empForm: {
          empName: '',
          sex: '',
          phone: '',
          emali: '',
        },
        empFormRules: {

        },
      }
    },
    methods: {
      beforeTabLeave(activeName,oldActiveName){
        console.log(activeName);
        console.log(oldActiveName);
      },
    },
    created(){

    },
    components: {
      RichText
    }
  }
</script>

<style scoped>

</style>
